<script setup>
import { ref, onMounted } from 'vue'
import { Search, Refresh } from '@element-plus/icons-vue';
import { getUserService } from '@/apis/user-manage';
const userType = [
  {
    value: '0',
    label: '管理员',
  },
  {
    value: '1',
    label: '普通用户',
  },
  {
    value: '2',
    label: 'vip用户',
  },
]
const options = [
  {
    value: '0',
    label: '禁用',
  },
  {
    value: '1',
    label: '正常',
  },
]

const userTableData = ref([])
const total = ref(0)
const searchInfo = ref({
  page: 1,
  pageSize: 10,
  username: '',
  mobile: '',
  status: '',
  userType: '',
})
const getAllUser = async () => {
  const res = await getUserService(searchInfo.value)
  console.log(res);
  userTableData.value = res.data.records
  total.value = res.data.total
}
const handleReset = () => {
  searchInfo.value = {}
  getAllUser()
}
const handlePageChange = (page) => {
  searchInfo.value.page = page
  getAllUser()
}
onMounted(() => {
  getAllUser()
})
</script>

<template>
  <el-container>
    <el-header>
      <el-form>
        <el-form-item>
          <span>用户名</span>
          <el-input v-model="searchInfo.username" style="width: 240px" placeholder="请输入用户名" />
        </el-form-item>
        <el-form-item>
          <span>手机号</span>
          <el-input v-model="searchInfo.mobile" style="width: 240px" placeholder="请输入手机号" />
        </el-form-item>
        <el-form-item>
          <span>角色</span>
          <el-select v-model="searchInfo.userType" placeholder="请选择" style="width: 120px">
            <el-option v-for="item in userType" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <span>状态</span>
          <el-select v-model="searchInfo.status" placeholder="请选择" style="width: 120px">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getAllUser">
            <el-icon>
              <Search />
            </el-icon>搜索
          </el-button>
          <el-button @click="handleReset">
            <el-icon>
              <Refresh />
            </el-icon>重置
          </el-button>
        </el-form-item>
      </el-form>
    </el-header>
    <el-main v-if="userTableData.length !== 0">
      <el-table :data="userTableData" style="width: 100%"  height="340">
        <el-table-column prop="username" label="用户名" width="180">
          <template #default="{ row }">
            <div style="display: flex;align-items: center;">
              <el-avatar :size="40" src="/src/assets/images/avatar.png" />
              <p style="margin-left: 10px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;width: 100px;">{{ row.username }}</p>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="mobile" label="手机号" width="160" />
        <el-table-column prop="status" label="状态" width="140">
          待开发
        </el-table-column>
        <el-table-column prop="sex" label="性别" width="120">
          <template #default="{ row }">
            <span v-if="row.sex === null">未设置</span>
            <span v-else>{{ row.sex === '1' ? '男' : '女' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="birthday" label="生日" width="150">
          <template #default="{ row }">
            <span v-if="row.birthday === null">未设置</span>
            <span v-else>{{ row.birthday }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="fans" label="粉丝" width="120" />
        <el-table-column prop="follow" label="关注" width="120" />
        <el-table-column prop="videoNum" label="视频数" width="120" />
        <el-table-column fixed="right" label="操作" min-width="120">
          <template #default>
            <el-button link type="primary" size="small" >
              Detail
            </el-button>
            <el-button link type="primary" size="small">Edit</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
    <el-footer v-if="userTableData.length !== 0">
      <el-pagination background layout="prev, pager, next" :total="total" @change="handlePageChange" />
    </el-footer>
    <EmptyData v-else @reset="handleReset" />
  </el-container>
</template>
<style scoped lang="scss">
@import url("@/assets/style/manage.scss");
</style>
